<script lang="ts" setup>
import {ref} from 'vue'
import { ElMessage,ElMessageBox} from 'element-plus';
import { ElButton,ElUpload} from "element-plus";

import type { UploadProps,UploadUserFile } from 'element-plus';

var pic_url=ref("")

const emit = defineEmits(['submitPic'])
const picList=ref<UploadUserFile[]>([])

const handleRemove:UploadProps['onRemove']=(pic,uploadPics)=>{
    console.log(pic,uploadPics)
}

const handlePreview:UploadProps['onPreview']=(uploadPic)=>{
    console.log(uploadPic)
}

const handleExceed:UploadProps['onExceed']=(pics,uploadPics)=>{
    ElMessage.warning('发布帖子最多上传一张照片')
}

var HandleSuccess_pic=function(res){
  console.log(res)
  pic_url=res
  emit('submitPic',pic_url)
}
</script>

<template>
    <el-upload
          v-model:file-list="picList"
          class="upload-demo"
           action="http://8.130.46.21:8000/pic/upload/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          list-type="picture"
          :limit="1"
          :auto-upload="true"
          name="file"
          :on-success="HandleSuccess_pic"
          :on-exceed="handleExceed"
        >
          <el-button type="primary" class="upload_pic"></el-button>
        </el-upload>
</template>

<style scoped>
.upload_pic{
    background: url(../assets/addPic.png);
    background-size: 100% 100%;
    height: 20px;
    width: 20px;
    border: none;
}

</style>
